import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'
import { hasToken } from '@/utils/auth'
import './style.scss'

@withRouter
class Nav extends Component {

    static propTypes = {
        currentPath: PropTypes.string
    }
    
    render() {
        const {match} = this.props
        const text = hasToken() ? '用户中心' : '登入注册'

        let authOrUser = <NavLink to="/auth/login" activeClassName="active">{text}</NavLink>
        
        if ('/user' === match.path) {
            authOrUser = <NavLink to="/user" activeClassName="active">{text}</NavLink>
        }

        return (
            <nav>
                <ul className="nav">
                    <li>
                        <NavLink 
                            to="/" 
                            exact
                            activeClassName="active"
                        >首页</NavLink>
                    </li>
                    <li>
                        <NavLink 
                            to="/article" 
                            activeClassName="active"
                        >文章列表</NavLink></li>
                    <li>
                        { authOrUser }
                    </li>
                </ul>
            </nav>
        )
    }
}

export default Nav